<template>
    <div class="sidebar-container">
        <div class="collapse-button" @click="$emit('toggle-collapse')">
            <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
        </div>
        <el-menu :default-active="activeMenu" class="el-menu-vertical" :collapse="isCollapse" background-color="#34495e"
            text-color="#b7c0cd" active-text-color="#409EFF" unique-opened router>
            <el-menu-item index="/dashboard">
                <i class="el-icon-s-home"></i>
                <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/user-management">
                <i class="el-icon-user"></i>
                <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="/book-management">
                <i class="el-icon-notebook-2"></i>
                <span>图书管理</span>
            </el-menu-item>
            <el-submenu index="4">
                <template slot="title">
                    <i class="el-icon-setting"></i>
                    <span>系统设置</span>
                </template>
                <el-menu-item index="/settings/profile">个人设置</el-menu-item>
                <el-menu-item index="/settings/system">系统配置</el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
export default {
    name: "SidebarView",
    props: {
        isCollapse: Boolean,
    },
    computed: {
        activeMenu() {
            return this.$route.path;
        },
    },
};
</script>
<style lang="less" scoped>
.sidebar-container {
    height: 100%;
    position: relative;

    .collapse-button {
        height: 48px;
        line-height: 48px;
        text-align: center;
        color: #b7c0cd;
        font-size: 18px;
        cursor: pointer;
        background-color: #2d3a4b;
        transition: all 0.3s;

        &:hover {
            color: #fff;
            background-color: #263445;
        }
    }

    .el-menu-vertical:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }

    .el-menu {
        border-right: none;
    }

    .el-menu-vertical {
        height: calc(100% - 48px);
        overflow-y: auto;
    }
}
</style>